import React, {Component} from 'react'
import DefaultLayout from '../../layouts/default_layout'
import TabMenu from '../../layouts/tab_menu'
import {connect} from 'react-redux'
import {setUserInfo, setDialogs, setUnread} from '../../actions'
import {post} from '../../common/js/utils'
import {List, NavBar, Badge} from 'antd-mobile'
import {moment} from '../../common/js/utils'
import Loading from '../../components/loading'
import Empty from '../../components/empty'
import {withRouter} from 'react-router-dom'

const Item = List.Item
const Brief = Item.Brief

function mapStateToProps(state, props) {
  return {
    userInfo: state.userInfo,
    dialogs: state.dialogs
  }
}

const mapDispatchToProps = dispatch => {
  return {
    setUserInfo(value) {
      dispatch(setUserInfo(value))
    },
    setDialogs(value) {
      dispatch(setDialogs(value))
    },
    setUnread(value) {
      dispatch(setUnread(value))
    }
  }
}

@connect(mapStateToProps, mapDispatchToProps)
@withRouter
class Home extends Component {

  state = {
    loading: true
  }

  getList = () => {
    post('/dialog/list').then(res => {
      this.setState({ loading: false })
      this.props.setDialogs(res.data)
      this.props.setUnread(res.unread)
    })
  }

  componentWillMount() {
    this.getList()
    window.refreshDialogs = this.getList
  }

  componentWillUnmount() {
    window.refreshDialogs = null
  }

  render() {
    const {dialogs, history} = this.props
    const {loading} = this.state
    return (
      <DefaultLayout
        header={
          <NavBar
            mode="dark"
          >我的消息</NavBar>
        }
        footer={
          <TabMenu />
        }
      >
        {
          loading && !dialogs.length
            ? <Loading />
            : dialogs.length
                ? <List className="add-friends-list">
                    {
                      dialogs.map((val, key) => (
                        <Item
                          key={key}
                          wrap={false}
                          extra={moment(val.message.meta.createdAt).fromNow()}
                          onClick={e => {
                            if (val.type === 0) {
                              history.push(`/chat-box?userId=${val.head._id}`)
                            }
                          }}
                          thumb={
                            <Badge
                              text={val.unread}
                              overflowCount={99}
                            >
                              <div className={'img'}>
                                <img
                                  src={val.head.icon}
                                  alt="icon"
                                />
                              </div>
                            </Badge>
                          }
                        >
                          <span>{val.head.name}</span>
                          <Brief>{val.message.content}</Brief>
                        </Item>
                      ))
                    }
                  </List>
                : <Empty title={'暂无消息'} />
        }
      </DefaultLayout>
    )
  }
}

export default Home
